<template>
  <div>
    <!--  -->
  </div>
</template>
<script>
export default {
  created() {
    // 数据转换成树形结构
    /*
    需要的数据
      [
      {
        id: 1,
        city: '广东',
        pid: '',
        children:[
           {
              id: 4,
              city: '广州',
              pid: 1
           },
           {
            id: 2,
            city: '深圳',
            pid: 1,
            children:[
                  {
                    id: 3,
                    city: '宝安',
                    pid: 2,
                  },
            ]
          },

        ]
      },

      ]

    */
    const list = [
      {
        id: 1,
        city: '广东',
        pid: ''
      },
      {
        id: 2,
        city: '深圳',
        pid: 1
      },
      {
        id: 3,
        city: '宝安',
        pid: 2
      },
      {
        id: 4,
        city: '广州',
        pid: 1
      }
    ]
    console.log(this.changeData(list))
    // console.log(this.changeData(list, 1))
  },
  methods: {
    changeData(arr, pid = '') {
      // 第一步：只考虑筛选出第一层数据（pid为空）
      // 第二步：通过pid可找出任意层数据(任意项的子集)
      // 第三步：给找出的数据的每一项加一个children:[]
      // 第四步：使用递归（自己调用自己）找出自己当前item项的子集（子集的pid是自己的id）
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style></style>
